<template>
  <div class="device-control">
    <h2>{{ pageTitle }}</h2>
    <div class="control-content">
      <p>这是 {{ pageTitle }} 页面</p>
      <p>具体功能正在开发中...</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const pageTitle = computed(() => {
  const path = route.path
  if (path.includes('/io')) return 'I/O控制'
  if (path.includes('/motion')) return '运动控制'
  if (path.includes('/dust')) return '除尘控制'
  if (path.includes('/quick')) return '一键设置'
  return '设备控制'
})
</script>

<style scoped>
.device-control {
  padding: 20px;
}

.control-content {
  margin-top: 20px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}
</style>
